import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { DividersPage } from './dividers/dividers'
import { IconPage } from './icon/icon'
import { AvatarPage } from './avatar/avatar'
import { ThumbnailPage } from './thumbnail/thumbnail'
import { SlidingPage } from './sliding/sliding'
@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  items: Array<{ title: string, text: string, icon: string }>;
  tabBarElement: any;
  constructor(public navCtrl: NavController) {
    this.items = [{ title: 'DividersPage', text: '分隔符列表', icon: 'pricetag' }, { title: 'IconPage', text: '图标列表', icon: 'star-outline' }, { title: 'AvatarPage', text: '头像列表', icon: 'person' }
      , { title: 'ThumbnailPage', text: '缩略图列表', icon: 'analytics' }, { title: 'SlidingPage', text: '滑动列表', icon: 'paper' }];
    if (document.querySelector('.tabbar')) {
      this.tabBarElement = document.querySelector('.tabbar.show-tabbar');
    }
  }

  ionViewWillEnter() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'none';
    }
  }

  ionViewWillLeave() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'flex';
    }
  }

  itemSelected(event, item) {
    switch (item.title) {
      case 'DividersPage':
        this.navCtrl.push(DividersPage, {
          item: item
        }, { animate: true, direction: 'forward' });
        break;
      case 'IconPage':
        this.navCtrl.push(IconPage, {
          item: item
        }, { animate: true, direction: 'forward' });
        break;
      case 'AvatarPage':
        this.navCtrl.push(AvatarPage, {
          item: item
        }, { animate: true, direction: 'forward' });
        break;
      case 'ThumbnailPage':
        this.navCtrl.push(ThumbnailPage, {
          item: item
        }, { animate: true, direction: 'forward' });
        break;
      case 'SlidingPage':
        this.navCtrl.push(SlidingPage, {
          item: item
        }, { animate: true, direction: 'forward' });
        break;
      default:
        break;
    }
  }

}
